<style lang="scss" scoped>
    .banner{
        position: relative;
    }
    .slide{
        height: 480px;
        overflow: hidden;
        color: #fff;
        .content{
            position: absolute;
            top: 0;
        }
        .bg{
            width:1200px;
            margin: auto;
            display: block;
        }
    }
    .b1{
        background-image: linear-gradient(to bottom,  #489FE2,#609EEB);
        .diy_btn{
            position:absolute;
            top: 50%;
            left: 0;
            z-index: 999;
        }
    }
    .b2{
        background-image: linear-gradient(to bottom,  #01D1F5,#179EF8);
        
    }
</style>
<style>
    .agile__actions{
        position:absolute;
        width:96%;
        left: 0;right: 0;
        top: 50%;
        margin: auto;
    }
    .agile__actions button{
        background: rgba(0,0,0,.1);
        width:40px;
        height: 50px;
        border:0;
        color: #fff;
    }
    .agile__actions button img{
        width:20px;
    }
</style>

<template>
    <div class="banner " @click="TJ_event('banner')">
        <agile :dots="false" :autoplay-speed="2000" :autoplay="true">
            <router-link class="slide b1"  :to="{name:'activity',query:$route.query}">
                <img class="bg" src="@/assets/banner1.jpg" alt="">
            </router-link>
            <router-link class="slide b2"  :to="{name:'activity',query:$route.query}">
                <img class="bg" src="@/assets/banner2.jpg" alt="">
            </router-link>
            <template slot="prevButton">
                <img src="@/assets/prev.svg" alt="">
            </template>
            <template slot="nextButton">
                <img src="@/assets/next.svg" alt="">
            </template>
        </agile>

    </div>
</template>
<script>
import { VueAgile } from 'vue-agile'
export default {
    components: {
		agile: VueAgile
    },
    methods:{

    }
}
</script>

